import React, { useState, useEffect } from 'react';
import styles from './NewStyles.module.css';
import { NavBar, Space, Toast } from 'antd-mobile';
import { UserAddOutline} from 'antd-mobile-icons';
import http from '../utils/http';
import { useNavigate } from 'react-router-dom';


export default function Fensi() {
  const navigate = useNavigate();
  const [followedFensi, setFollowedFensi] = useState([])
  const getlist = async () => {
    const res = await http.get('/friend')
    setFollowedFensi(res.data.data)
  }
  useEffect(() => {
    getlist()
  }, [])

  const handleFollow = async (id) => {
    const res = await http.post(`/changeIsguanzhu?id=${id}`, {
      id: id,
      isguanzhu: true
    })
    const updateStatus = followedFensi.filter(item => item._id !== id)
    setFollowedFensi(updateStatus)
  };
  const back = () => {
    navigate(-1)
}
  return (
    <div>
      <div className={styles.pageHeader}>
        <NavBar // backArrow={<ArrowLeftOutline />}\
          onBack={() => navigate(-1)}
        >
          烦
        </NavBar>  
        <span className={styles.yhadd}><UserAddOutline /></span>
      </div>
      
      <h2 className={styles.pageTitle}>粉丝</h2>
      
      <div className={styles.friendsList}>
        {followedFensi.filter(item => item.isguanzhu == false).length > 0 ? (
          followedFensi.filter(item => item.isguanzhu == false).map((fensi, index) => (
            <div key={fensi._id} className={styles.FriendsItem}>
              <img src={fensi.avatar || '1.jpg'} alt={fensi.name} className={styles.avatarfriend} />
              <div className={styles.friendInfo}>
                <h3>{fensi.name}</h3>
                <p>{fensi.desc}</p>
              </div>
              <button onClick={() => handleFollow(fensi._id)}>
                关注
              </button>
            </div>
          ))
        ) : (
          <div className={styles.emptyState}>
            <p>暂无粉丝</p>
          </div>
        )}
      </div>
    </div>
  );
}

